{% extends 'index.html' %}
{% load time_filter %}
{% block content %}
    <div class="breadcrumbs">
        <div class="breadcrumbs-inner">
            <div class="row m-0">
                <div class="col-sm-4">
                    <div class="page-header float-left">
                        <div class="page-title">
                            <h1>京乳时鲜 &emsp;&emsp;&emsp;仓库号&emsp;&emsp;{{warehouse_id}}</h1>
                        </div>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="page-header float-right">
                        <div class="page-title">
                            <ol class="breadcrumb text-right">
                                <li><a href="{% url 'index' %}">主页</a></li>
                                <li class="active">过期商品</li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                        <h4>过期商品管理</h4>
                    </div>
                    <div class="card-body">
                        <div>
                            <a>选择处理方式&nbsp;</a>
                            <select class="form-control" id="typeSelect" name="typeSelect" style="width: 11%;display: inline-block;vertical-align: top">
                                <option value="化肥厂">化肥厂</option>
                                <option value="清洁剂公司">清洁剂公司</option>
                                <option value="生物公司">生物公司</option>
                            </select>
                            <button type="button" class="btn btn-danger" style="margin-bottom: 10px;" data-toggle="modal" data-target="#smallmodal"><i class="fa fa-fw fa-trash-o"></i> 处理所选商品</button>
                            <button type="button" class="btn btn-primary" style="margin-bottom: 10px;" id="selectAll"><i class="fa fa-fw fa-circle-o"></i> 全选</button>
                        </div>

                        <table id="bootstrap-data-table" class="table table-bordered" style="cursor: pointer">
                            <thead>
                            <tr>
                                <th>产品ID</th>
                                <th>产品名称</th>
                                <th>已过期时间</th>
                                <th>数量</th>
                                <th>存储位置</th>
                                <th>产品入库单号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <!--修改对应的属性-->
                            {% for expired in product_list %}
                            <tr>
                                <td>{{expired.p_ID_id}}</td>
                                <td>{{expired.p_name}}</td>
                                <td>{{expired|timediff}}</td>
                                <td>{{expired.s_number}}</td>
                                <td>{{expired.shelf_id}}</td>
                                <td>{{expired.s_order_ID}}</td>
                            </tr>
                            {% endfor %}
                            </tbody>

                        </table>

                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="smallmodal" tabindex="-1" role="dialog" aria-labelledby="smallmodalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header" style="display: flex">
                        <h5 class="modal-title" id="smallmodalLabel">警告！</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="display: inline-block">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>
                            确定从库存中处理所选商品吗？
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" data-dismiss="modal" id="delete">确定</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
{% endblock %}

{% block css_js_2 %}

    <link rel="stylesheet" href="/static/assets/css/lib/datatable/dataTables.bootstrap4.min.css">
{#    <script src="/static/assets/js/datatables/js/jquery.dataTables.min.js"></script>#}
    <script src="/static/assets/js/popper.min.js"></script>
    <script src="/static/assets/js/bootstrap.min.js"></script>
    <script src="/static/assets/js/jquery.matchHeight.min.js"></script>
    <script src="/static/assets/js/main.js"></script>


    <script src="/static/assets/js/lib/data-table/datatables1.10.18.min.js"></script>
    <script src="/static/assets/js/lib/data-table/dataTables.bootstrap4.min.js"></script>

    <script>
        jQuery(document).ready(function($) {
            $("#warehouseManage").addClass("active");
            $("#expired").addClass("active");
            $("#w_toggle").trigger("click");
            var table = $("#bootstrap-data-table").DataTable( {
                aLengthMenu: [
                    [10, 25, 50, 100, -1], [10, 25, 50, 100, "全部"]
                ],
                language:{
                    "info": "显示_START_至_END_项结果，共_TOTAL_项",
                    "search": "搜索:",
                    "paginate": {"previous": "上一页", "next": "下一页"},
                    "lengthMenu": "显示 _MENU_ 项",
                    "zeroRecords": "抱歉，没有找到符合条件的记录",
                    "infoEmpty":"显示 0 至 0 项结果，共 0 项",
                },
            } );

            $("#bootstrap-data-table tbody").on('click','tr',function () {
                $(this).toggleClass('selected');
            });

            $('#delete').click( function () {
                var deleteData = table.rows('.selected').data();
                if (deleteData.length > 0){
                    var deleteArray = [];
                    for (var i = 0; i < deleteData.length; i++) {
                        deleteArray[i] = deleteData[i]
                    }
                    $.ajaxSetup({data:{csrfmiddlewaretoken:"{{ csrf_token }}"}});
                    $.ajax({
                        url:"",
                        type:"POST",
                        data:{"type":$("#typeSelect").val(), "data": JSON.stringify(deleteArray)},
                        success:function (data) {
                            if (data.result==="success"){
                                table.rows('.selected').remove().draw(false);
                            }
                        }
                    })
                }
            } );

            $("#selectAll").on('click', function () {
                $("#bootstrap-data-table tbody tr").each(function () {
                    $(this).toggleClass('selected');
                })
            })

        } );
        //TODO 处理滚动条的问题
    </script>
{% endblock %}

